<template>
  <el-form :model="props.form" :rules="props.rules">
    <el-table :data="props.form.tableData" style="width: 100%" border :header-cell-style="{ height: '25px', fontSize: '15px', backgroundColor: '#f2f2f2' }">
      <el-table-column align="center" label="#" width="80">
        <template #default="{ row, $index }">
          <template v-if="form.tableData.length - 1 === $index">
            <el-icon style="margin-right: 15px; cursor: pointer" @click="clickHandle('add')"><Plus /></el-icon>
          </template>
          <el-icon style="cursor: pointer" @click="clickHandle('minu', $index)"><Minus /></el-icon>
        </template>
      </el-table-column>

      <el-table-column align="center" :prop="item.prop" :label="item.label" v-for="(item, index) in headerList" :key="index">
        <template #default="{ row, $index }">
          <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]">
            <el-input v-model.trim="row[item.prop]" placeholder="请输入" clearable />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  headerList: {
    type: Array,
    default: () => [],
  },
  rules: {
    type: Array,
    default: () => [],
  },
})

/* const rules = reactive({
  name: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
}) */

const emits = defineEmits(['clickHandle'])
const clickHandle = (type, index) => {
  emits('clickHandle', { type, index })
}
</script>

<style scoped lang="scss"></style>
